<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>canvas笑脸</title>
</head>
<style>
</style>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        浏览器不支持Canvas！
    </canvas>
</div>

<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

       
        context.fillStyle = "#FFF";
        context.fillRect(0, 0, 800, 600);
        //  }
        context.beginPath();
        context.arc(400,300,100,0,2*Math.PI);
      //  context.closePath();
        context.strokeStyle = "#aa3a5c";
        context.fillStyle = "yellow";
        context.fill(); //确认填充
        context.stroke();

        context.beginPath();
        context.fillStyle="black";
        context.arc(360,265,10,0,2*Math.PI);
        context.fill();
        context.stroke();

        context.beginPath();
        context.fillStyle="black";
        context.arc(440,265,10,0,2*Math.PI);
        context.fill();
        context.stroke();

        context.beginPath();
        //context.fillStyle="green";
        context.arc(400,315,40,0.15*Math.PI,0.85*Math.PI);
       // context.fill();
        context.strokeStyle="black";
        context.stroke();

    }
</script>
</body>
</html>